<template>
  <div class="app-container">
    <el-row :gutter="24">
      <el-col :span="6" :offset="20" />
    </el-row>
    <el-table
      v-loading="listLoading"
      style="margin-top: 20px"
      :data="list"
      size="mini"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="应用包名" width="195">
        <template slot-scope="scope" align="center">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="应用名称" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.row)"
          >编辑标签
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px"
      :current-page.sync="page.current"
      :page-sizes="[10,20,50,100, 200, 300, 400]"
      :page-size="page.size"
      layout="total,sizes, prev, pager, next"
      :total="page.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <el-dialog
      title="编辑标签"
      :close-on-click-modal="false"
      :visible.sync="visible.dialog"
      width="30%"
      center
    >
      <span>
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="(item, index) in dialogTags" :key="index" :label="item.name" name="type" />
        </el-checkbox-group>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible.dialog = false">取 消</el-button>
        <el-button type="primary" @click="appEditTags">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { appsList, appsTags } from '@/api/apps'
import { tagAll } from '@/api/tags'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      tags: [],
      dialogTags: [],
      checkList: [],
      appId: '',
      page: {
        size: 20,
        current: 1,
        total: 1
      },
      visible: {
        dialog: false
      }
    }
  },
  created() {
    this.fetchData()
    tagAll({}).then(response => {
      this.tags = response.body
    })
  },
  methods: {
    fetchData() {
      this.listLoading = true
      appsList(this.page).then(response => {
        this.list = response.body
        this.listLoading = false
        this.page.total = response.totalCount
      })
    },
    handleEdit(row) {
      this.appId = row.id
      this.dialogTags = []
      this.checkList = []
      for (let i = 0; i < this.tags.length; i++) {
        const item = this.tags[i]
        item.check = false
        for (let j = 0; j < row.tags.length; j++) {
          if (row.tags[j].id === item.id) {
            item.check = true
            this.checkList.push(item.name)
          }
        }
        this.dialogTags.push(item)
      }
      this.visible.dialog = true
    },
    appEditTags() {
      if (this.checkList.length === 0) {
        this.$message({
          type: 'waring',
          message: '至少选中一个标签'
        })
        return
      }
      let tagsIds = ''
      for (let i = 0; i < this.checkList.length; i++) {
        const item = this.checkList[i]
        for (let j = 0; j < this.tags.length; j++) {
          if (item === this.tags[j].name) {
            tagsIds += this.tags[j].id + ','
          }
        }
      }
      appsTags({ tags: tagsIds.substr(0, tagsIds.length - 1), id: this.appId }).then(response => {
        if (response.code === 200) {
          this.$message({
            type: 'success',
            message: '编辑成功'
          })
          this.visible.dialog = false
          this.fetchData()
        } else {
          this.$message({
            type: 'waring',
            message: response.message
          })
        }
      })
    },
    handleSizeChange(val) {
      this.page.size = val
      this.fetchData()
    },
    handleCurrentChange(val) {
      this.page.current = val
      this.fetchData()
    }
  }
}
</script>
